/***
Include `@box` in any element to turn it into a box. To create the box head; include `@box-head` in the first element in the box.

Boxes use the same `@themes` as anything else so everything on your page has a consistent look.

<div>
	<h3>A Box (<code>@box-head</code>)</h3>
	<p>This is a <code>@bar-top</code> inside the box</p>
	<p>This is a standard box. You can put buttons, lists, bars and anything else in here.</p>
	<ul>
		<li>A <code>@list</code></li>
		<li>inside</li>
		<li>the box</li>
	</ul>
	<p>More regular content</p>
	<p>This is a <code>@box-foot</code></p>
</div>
***/
@mixin box {
	display: block;

	margin: 0 0 $margin-bottom;
	padding: $wrapper-padding;

	overflow: hidden;
	list-style: none;

	border: 1px solid;
	@include border-radius($border-radius);

	@include box-shadow($default-shadow);
}

	@mixin box-head ($align: left) {
		display: block;

		margin: (-$wrapper-padding) (-$wrapper-padding) $margin-bottom;
		padding: $padding-top-bottom $wrapper-padding;

		text-align: $align;

		border-bottom: 1px solid;
		@include border-top-left-radius($border-radius);
		@include border-top-right-radius($border-radius);
	}

	@mixin box-foot ($align: center) {
		display: block;

		margin: $margin-bottom (-$wrapper-padding) (-$wrapper-padding);
		padding: $padding-top-bottom $wrapper-padding;

		text-align: $align;

		border-top: 1px solid;
		@include border-bottom-left-radius($border-radius);
		@include border-bottom-right-radius($border-radius);
	}
